import BgImageLeft from './bgimgleft.js'
import BgImageRight from './bgimgright.js'
import ExcitingBoxF from './excitingboxf.js'
import ExcitingBoxL from './excitingboxl.js'
import FindBox from './findbox.js'
import FooterBar from './footerbar.js'
import HeaderBar from './headerbar.js'
import GoodsItem from './items.js'
import MainStartBox from './mainstartbox.js'
import PanelRow from './panelrow.js'

export default {
  name: 'HomeMall',
  setup() {
    const goods = [
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/1.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/2.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/4.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/5.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/10.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/11.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/12.png',
        href: ''
      },
      {
        title: 'Product',
        img: '../../HandleAllPageComponent/demo1/assets/images/product/13.png',
        href: ''
      }
    ]
    return {
      goods
    }
  },
  template: `
  <header-bar></header-bar>
  <div class="page-content-product">
    <div class="main-product">
      <div class="container">
        <div class="row clearfix">
          <find-box></find-box>
        </div>
        <div class="row clearfix">
          <goods-item v-for="(item,index) in goods" :item="item"></goods-item>
          <div class="categories_link">
            <a href="#">Browse all categories here</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cat-main-box">
    <div class="container">
      <panel-row></panel-row>
    </div>
  </div>
  <div class="products_exciting_box">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 wow fadeIn" data-wow-delay="0.2s">
          <exciting-box-f></exciting-box-f>
        </div>
        <div class="col-md-6 col-sm-6 wow fadeIn" data-wow-delay="0.4s">
          <exciting-box-l></exciting-box-l>
        </div>
      </div>
    </div>
  </div>
  <div class="start-free-box">
    <div class="container">
      <div class="row">
        <div class="container">
          <main-start-box></main-start-box>
        </div>
      </div>
      <bg-image-left></bg-image-left>
      <bg-image-right></bg-image-right>
    </div>
  </div>
  <footer-bar></footer-bar>
  `,
  components: {
    HeaderBar,
    FindBox,
    GoodsItem,
    PanelRow,
    ExcitingBoxL,
    ExcitingBoxF,
    MainStartBox,
    BgImageLeft,
    BgImageRight,
    FooterBar
  }
}
